<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: header"/>
<body style="background-color: #fff">
    <style>
        .dm-form{padding-top: 20px; padding-left: 100px;}
        .dm-form tr{height: 50px;}
        .dm-form input{width: 360px}
        .dm-label{width: 80px;padding-right: 15px;text-align: right}
    </style>
    <form id="form" class="dm-form" method="post" action='/system/menu/edit'>
        <input type="hidden" name="menuId" th:value="${menu.menuId}">
        <table>
            <tr>
                <td class="dm-label">上级菜单：</td>
                <td class="dm-content">
                    <input id="input_parentId" name="parentId" th:value="${menu.parentId}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单类型：</td>
                <td class="dm-content">
                    <input class="menuType" name="menuType" id="menuType1" data-options="label:'目录'" value="1">
                    <input class="menuType" name="menuType" id="menuType2" data-options="label:'菜单'" value="2">
                    <input class="menuType" name="menuType" id="menuType3" data-options="label:'按钮'" value="3">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单名称：</td>
                <td class="dm-content">
                    <input class="easyui-textbox" name="menuName" data-options="required:true" th:value="${menu.menuName}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单图标：</td>
                <td class="dm-content">
                    <input id="input_icon" class="easyui-textbox" name="icon" th:value="${menu.icon}">
                    <i id="icon_view" th:class="${'layui-icon '+menu.icon}"></i>
                </td>
            </tr>

            <tr>
                <td class="dm-label">菜单URL：</td>
                <td class="dm-content">
                    <input id="input_url" class="easyui-textbox" name="url" th:value="${menu.url}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单权限：</td>
                <td class="dm-content">
                    <input id="input_perms" class="easyui-textbox" name="perms" th:value="${menu.perms}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">菜单排序：</td>
                <td class="dm-content">
                    <input id="input_order" name="orderNum" class="easyui-numberspinner" th:value="${menu.orderNum}">
                </td>
            </tr>
            <tr>
                <td class="dm-label">是否显示：</td>
                <td class="dm-content">
                    <input class="visible" name="visible" data-options="label:'显示'" value="0">
                    <input class="visible" name="visible" data-options="label:'不显示'" value="1">
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        var parentMenuType = [[${menu.menuType}]]-1;
        $(function() {
            $('.visible').radiobox({})
            $('.visible').radiobox('checked', [[${menu.visible}]]);
            $('.menuType').radiobox('checked',[[${menu.menuType}]]);

            changeRadioByParentType(parentMenuType)
        });

        $('#input_parentId').combotree({
            url: '/system/menu/menuTree',
            panelHeight: 260,
            editable: false,
            onSelect: function (node) {
                parentMenuType = node.attributes;
                changeRadioByParentType();
            }
        });

        $('.menuType').radiobox({
            onChange: function (checked,data) {
                if (data.value == 1) {
                    $("#input_url").parents("tr").hide();
                    $("#input_perms").parents("tr").hide();
                    $("#input_icon").parents("tr").show();
                    $("#input_visible").parents("tr").show();
                    $('#input_url').val('');
                    $('#input_perms').val('');
                } else if (data.value == 2) {
                    $("#input_url").parents("tr").show();
                    $("#input_perms").parents("tr").show();
                    $("#input_visible").parents("tr").show();
                    if (parentMenuType == 1) {
                        $("#input_icon").parents("tr").show();
                    } else {
                        $("#input_icon").parents("tr").hide();
                        $('#input_icon').val('');
                    }
                } else if (data.value == 3) {
                    $("#input_url").parents("tr").hide();
                    $("#input_perms").parents("tr").show();
                    $("#input_icon").parents("tr").hide();
                    $("#input_visible").parents("tr").hide();
                    $('#input_url').val('');
                    $('#input_icon').val('');
                }
            }
        });

        $("#input_icon").textbox({
            buttonText: '选择图标',
            onClickButton: function(){
                dm.openViewDialog('选择图标','/system/menu/icon',780,600);
            }
        });

        function changeRadioByParentType(){
            if (!parentMenuType || parentMenuType == 0) {
                $('#menuType1').radiobox('enable');
                $('.menuType').radiobox('checked', "1");
                $('#menuType2').radiobox('enable');
                $('#menuType3').radiobox('disable');
            } else if (parentMenuType == 1) {
                $('#menuType1').radiobox('enable');
                $('#menuType2').radiobox('enable');
                $('.menuType').radiobox('checked', "2");
                $('#menuType3').radiobox('disable');
            } else if (parentMenuType == 2) {
                $('#menuType3').radiobox('enable');
                $('.menuType').radiobox('checked', "3");
                $('#menuType1').radiobox('disable');
                $('#menuType2').radiobox('disable');
            }
        }

        function changeIcon(value) {
            $("#input_icon").textbox('setValue', value);
            $("#icon_view").removeClass().addClass('layui-icon').addClass(value);
        }
        function submitHandler(index) {
            dm.save('form', function() {
                parent.layer.close(index);
                parent.dm.search('table', null, 'treegrid');
            })
        }
    </script>
</body>
</html>
